<template>
	<view class="container" :style="{paddingTop: paddingTop + 'px'}">
		
		<navBar title="申请售后"/>
		
		<view class="c-goods">
			<view class="c-title">
				<view class="ct-flag">*</view>
				<view class="ct-name">选择商品</view>
			</view>
			<!-- 商品列表 -->
			
			<radio-group @change="radioChange">
				<view v-for="(item, index) in goodsList" :key="item.goodsId" class="cg-list">
						<radio :value="index" :checked="index == radioValue" style="align-self: center; margin-right: 10rpx;" color="#CF1A1B"/>
						<view class="cgl-img">
							<image class="img"
								:src="item.image ? item.image : 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/order/goods_default_square.png'">
							</image>
						</view>
						<view class="cgl-info">
							<view class="cgli-name">{{ item.goodsName }}</view>
							<view class="cgli-num">
								<view class="">
									共{{ item.quantity }}件
								</view>
								<view class="cgli-number">
								  <uni-number-box
								    :min="1"
										:max="item.quantity"
								    v-model="item.value"
								    @change="updateNumber(item)">
								  </uni-number-box>
								</view>
								</view>
						</view>
				</view>
			</radio-group>
				
		</view>
		
		<!-- 售后主题 -->
		<view class="c-form">
			<view class="c-title">
				<view class="ct-flag">*</view>
				<view class="ct-name">售后主题</view>
			</view>
			<view class="c-theme">
				<view
					v-for="(item, index) in themeList"
					:key="item.value"
					:class="['ct-item', themeIndex === index ? 'activeIndex' : '']"
					@click="clickItem('theme', index)"
				>
					{{ item.name }}
				</view>
			</view>
			
			<view class="c-title">
				<view class="ct-flag">*</view>
				<view class="ct-name">选择具体的类型</view>
			</view>
			<view class="c-theme">
				<view
					v-for="(item, index) in typeList"
					:key="item.value"
					:class="['ct-item', typeIndex === index ? 'activeIndex' : '']"
					@click="clickItem('type', index)"
				>
					{{ item.name }}
				</view>
			</view>
			
			<view class="c-title">
				<view class="ct-flag">*</view>
				<view class="ct-name">问题描述</view>
			</view>
			<view class="c-textarea">
				<u--textarea
					v-model="content"
					count
					autoHeight
					:maxlength="1000"
					:placeholderStyle="{ color: 'rgba(0, 0, 0, 0.45)'}"
					placeholder="请描述您所遇到的问题，我们将尽快解决。"
				/>
			</view>
			
			<view class="c-title">
				<view class="ct-name">上传凭证
					<text class="ct-desc">(最多可上传9个)</text>
				</view>
			</view>
			<view class="cr-img-list">
				<view class="cr-img" v-for="item in issueImageList" :key="item">
					<video v-if="videoTypeList.includes(getFileType(item))" :src="item" @error="videoErrorCallback" >
						<view class="media-delte" @click.stop="delateImg(item)"> 
							<uni-icons type="closeempty" size="14" color="rgb(255, 255, 255)"></uni-icons>
						</view>
					</video>
					<image v-else :src="item" mode="scaleToFill" @click.stop="handlePreviewImage(item, issueImageList)">
						<view class="media-delte" @click.stop="delateImg(item)">
							<uni-icons type="closeempty" size="14" color="rgb(255, 255, 255)" ></uni-icons>
						</view>
					</image>
				</view>
				<!-- 上传 -->
					<uploadMedia
						v-if="issueImageList.length < 9"
						class="uploadMedia"
						@handleFile="handleFile"
						:videoSize="200"
						style="width: 32%;"
					/>
			</view>
			
		</view>
		
		<view class="c-info">
			<u--form
			  ref="formRef"
			  label-width="90px"
				:rules="rules"
			  :model="formData"
			  :label-style="{ fontSize: '28rpx', color: '#646464' }"
			>			
				<u-form-item label="联系人" prop="contactsName">
				  <u--input
				    v-model="formData.contactsName"
				    border="bottom"
				    placeholder="请输入联系人"
						clearable
				  ></u--input>
				</u-form-item>
				
				<u-form-item label="联系方式" prop="contactsMobile">
				  <u--input
				    v-model="contactsMobile"
				    border="bottom"
				    placeholder="请输入联系方式"
						clearable
				  ></u--input>
				</u-form-item>
			
			</u--form>
			
		</view>
		
		<!-- 提交 -->
		<view class="c-action">
			<button type="warn" @click.stop="handleSubmit" :loading="btnLoading">提交</button>
		</view>
		
	</view>
</template>

<script>
	import navBar from '@/components/navBar.vue'
	import uploadMedia from '@/components/uploadMedia.vue'
	export default {
		components: {
			navBar,
			uploadMedia
		},
		data() {
			return {
				paddingTop: '',
				btnLoading: false,
				goodsList: [],
				formData: {
					contactsName: '',
					contactsMobile: ''
				},
				rules: {
					contactsName: [
						{
							required: true,
							message: '请输入联系人',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								// if (/(\ud83c[\udc00-\udfff])|(\ud83d[\udc00-\udfff])|(\ud83e[\udc00-\udfff])|[\u2100-\u32ff]|[\u0030-\u007f][\u20d0-\u20ff]|[\u0080-\u00ff]/.test(value)) {
								// 	callback(new Error('禁止输入表情符号'))
								// }
								if(/[^\u4E00-\u9FA5]/.test(value)){
									callback(new Error('联系人只能输入中文'))
								}
								callback();
							},
						}
					],
					contactsMobile: [
						{
							required: true,
							message: '请输入联系方式',
							trigger: ['blur', 'change']
						},
						{
						  validator: (rule, value, callback) => {
						    return uni.$u.test.mobile(value);
						  },
						  message: '手机号码不正确',
						  trigger: ['change','blur'],
						}
					]
				},
				themeList: [
					{
						name: '轮胎订单问题',
						value: 1,
					},
					{
						name: '保养问题',
						value: 2,
					}
				],
				themeIndex: 0,
				typeList: [
					{
						name: '产品质量问题',
						value: 1,
					},
					{
						name: '安装后使用问题',
						value: 2,
					},
					{
						name: '优惠/活动问题',
						value: 3,
					},
					{
						name: '其它问题',
						value: 4,
					},
				],
				typeIndex: 0,
				content: '',	// 问题描述
				videoTypeList: ['mp4'],	// 用户可上传得视频文件类型
				issueImageList: [], // 附件数组
				radioValue: 0,
			};
		},
		onReady() {
		  this.$refs.formRef.setRules(this.rules)
		},
		onLoad(query){
			this.paddingTop = this.$store.getters['global/getSystemInfo'].navBarHeight
			this.getDataInfo(query)
		},
    computed: {
      contactsMobile: {
				get() {
          let n = String(this.formData.contactsMobile)
          n = n.length === 11 ? n.slice(0, 3) + '****' + n.slice(7) : n
          return n
        },
        set(val) {
          this.formData.contactsMobile = val || ''
        }
      },
			getFileType(){
				return (fileUrl) => {
					return fileUrl && fileUrl.length && fileUrl.substring(fileUrl.lastIndexOf(".") + 1).toLowerCase()
				}
			},
    },
		methods: {
			radioChange(e) {
				this.radioValue = e.detail.value
			},
			updateNumber(item){
				// console.log(item);
			},
			delateImg(url) {
				this.issueImageList = this.issueImageList.filter(i => i !== url)
			},
			handleFile(data){
				if(this.issueImageList.length < 9){
					this.issueImageList.push(data)
				}
			},
			clickItem(type, index){
				if(type === 'theme'){
					this.themeIndex = index
				}else {
					this.typeIndex = index
				}
			},
			async handleSubmit(){
				if(!this.content){
					uni.showToast({
						title: '请输入问题描述',
						icon: 'none'
					})
					return false
				}
				if(this.btnLoading === true){
					return false
				}
				try {
					await this.$refs.formRef.validate()
					
					this.btnLoading = true
					
					const data = {
						contact: this.formData.contactsName,
						contactPhone: this.formData.contactsMobile,
						issueDesc: this.content,
						issueImageList: this.issueImageList,
						issueTopic: this.themeList[this.themeIndex - 0].name,
						issueType: this.typeList[this.typeIndex - 0].name,
						orderItemId: this.goodsList[this.radioValue - 0].id,
						quantity: this.goodsList[this.radioValue - 0].value
					}
					
					const res = await this.$request({
						method: 'POST',
						url: '/order-center/order-customer-service/apply',
						data
					})
					
					uni.showToast({
						title: '提交成功',
						icon: 'success'
					})
					
					setTimeout(() => {
						uni.redirectTo({
						  url: `/orderPack/aftermarket/index?current=1`,
						})
						// 存储用于在（售后/退款）判断页面跳转
						uni.setStorageSync('source', 'afterSale')
						
					}, 1500)
					
					this.btnLoading = false
					
				} catch (res) {
					uni.showToast({
						title: res.respMsg,
						icon: 'none'
					})
					this.btnLoading = false
				}
			},
			getDataInfo(query){
				uni.showLoading({
					title: '加载中...'
				})
				
				const { index, userName, userPhone } = query
				
				// 商品列表
				const items = uni.getStorageSync('items') || []
				items.map(i => {
					i.value = 1
				})
				this.goodsList = items
				this.radioValue = index
				
				this.formData.contactsName = userName
				this.formData.contactsMobile = userPhone || ''
				
				uni.removeStorageSync('items')
				uni.hideLoading()
			},
			// 图片预览
			handlePreviewImage(url, list){
				uni.previewImage({
					current: url,
					urls: list
				})
			},
			// 视频播放出错时触发	
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.container {
	box-sizing: border-box;
	padding-bottom: 190rpx;
	.c-goods {
		margin-bottom: 12rpx;
		box-sizing: border-box;
		background-color: #ffffff;
		
		// 商品列表
		.cg-list {
			display: flex;
			box-sizing: border-box;
			padding: 24rpx 64rpx 18rpx 32rpx;
			border-top: 2rpx solid rgba(0, 0, 0, 0.1);
			/deep/ .u-radio-group {
				flex: 0 !important;
			}
			.cgl-img {
				image {
					width: 138rpx;
					height: 138rpx;
				}
			}
			.cgl-info {
				width: 100%;
				margin-left: 24rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 20rpx 0;
				.cgli-name {
					font-size: 14px;
					color: rgba(0, 0, 0, 0.85);
					text-shadow: 0 0 0.1px currentColor;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp:2;
				}
				.cgli-num {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 13px;
					// color: rgba(0, 0, 0, 0.45);
				}
			}

		}
	}
	
	// 主题 - 表单

	.c-title {
		display: flex;
		align-items: center;
		height: 45px;
		padding-left: 32rpx;
		.ct-flag {
			color: rgba(241, 87, 87, 1);
		}
		.ct-name {
			margin-left: 14rpx;
			color: rgba(0, 0, 0, 0.85);
			font-size: 14px;
			text-shadow: 0 0 0.1px currentColor;
			.ct-desc {
				margin-left: 20rpx;
				font-size: 14px;
				color: rgba(0, 0, 0, 0.45);
			}
		}
	}
	// 选中状态的class
	.activeIndex {
		background-color: rgba(207, 26, 27, 1) !important;
		color: #ffffff !important;
	}
	
	.c-form {
		background-color: #ffffff;
		font-size: 14px;
		padding-bottom: 20rpx;
		.c-theme {
			padding-left: 60rpx;
			display: flex;
			flex-wrap: wrap;
			margin: 18rpx 0;
			.ct-item {
				line-height: 64rpx;
				text-align: center;
				width: 244rpx;
				height: 64rpx;
				margin-right: 48rpx;
				background-color: rgba(0, 0, 0, 0.06);
				color: rgba(0, 0, 0, 0.85);
				border-radius: 4rpx;
				&:nth-child(3), &:nth-child(4) {
					margin-top: 32rpx;
				}
			}
		}
		
		//	文本框
		.c-textarea {
			margin: 0 60rpx 30rpx;
			box-sizing: border-box;
			overflow-y: auto;
			border-radius: 6rpx;
			/deep/ .u-textarea {
				background-color: rgba(245, 245, 246, 1);
				border: none;
				height: 240rpx !important;
				padding: 20rpx 16rpx 48rpx !important;
				textarea {
					height: auto !important;
				}
			}
			/deep/ .u-textarea__count {
				background-color: rgba(245, 245, 246, 1) !important;
				left: 5px !important;
				right: 0 !important;
			}
		}
		
		// 上传
		.cr-img-list {
			display: flex;
			flex-wrap: wrap;
			width: 100%;
			padding: 0 40rpx;
			box-sizing: border-box;
			.cr-img {
				position: relative;
				width: 32%;
				margin: 0 8rpx 8rpx 0;
				image,
				video {
					width: 100%;
					height: 176rpx;
				}
				.media-delte {					
					position: absolute;
					top: 0;
					right: 0;
					background-color: #373737;
					height: 20px;
					width: 20px;
					display: flex;
					flex-direction: row;
					border-bottom-left-radius: 100px;
					align-items: center;
					justify-content: center;
					z-index: 3;
					/deep/ .uni-icons {
						line-height: 14px;
						position: absolute;
						right: 2rpx;
						top: 2rpx;
					}
				}
			}
			
		}
	}
	
	// 退款原因
	.c-info {
		margin: 24rpx 0;
		padding: 0 32rpx;
		background-color: #ffffff;
		.area-input {
		  display: flex;
		  flex-direction: row;
		  justify-content: space-between;
		  .icon-arrow {
		    border-bottom: 0.5px solid #dadbde;
		    display: flex;
		    align-items: center;
		  }
		}
	}
	
	.c-action {
		position: fixed;
		z-index: 9;
		left: 0;
		bottom: 0;
		height: 178rpx;
		width: 100%;
		background-color: #ffffff;
		padding: 30rpx 32rpx 68rpx;
		box-sizing: border-box;
		box-shadow: 0rpx -10rpx 20rpx 1rpx rgba(0,0,0,0.1);
	}
}
</style>
